<template>
  <div style="width: 60%; margin: 10px auto">
    <div
      class="card"
      style="padding: 20px; display: flex; grid-gap: 20px; margin-bottom: 20px"
    >
      <img :src="data.pet.photo" alt="" style="height: 250px" />
      <div
        style="
          flex: 1;
          width: 0;
          display: flex;
          flex-direction: column;
          justify-content: space-around;
        "
      >
        <div style="font-size: 20px; font-weight: bold; margin-bottom: 10px">
          {{ data.pet.name }}
        </div>
        <div style="margin-bottom: 10px">
          <span style="color: #666">宠物类型：</span>
          <span>{{ data.pet.typeName }}</span>
        </div>
        <div style="margin-bottom: 10px">
          <span style="color: #666">宠物品种：</span>
          <el-tag type="success">{{ data.pet.breed }}</el-tag>
        </div>
        <div style="margin-bottom: 10px">
          <span style="color: #666">宠物性别：</span>
          <span>{{ data.pet.sex }}</span>
        </div>
        <div style="margin-bottom: 10px">
          <span style="color: #666">云养价格：</span>
          <span style="color: red; font-size: 20px"
            >￥{{ data.pet.amount }}</span
          >
        </div>
      </div>
    </div>
    <el-tabs v-model="activeTabs" class="demo-tabs">
      <el-tab-pane label="动态视频" name="dynamic">
        <div class="waterfall-container">
          <div
            class="waterfall-item"
            v-for="item in data.pet.petCloudVideoList"
            :key="item.id"
          >
            <el-card style="max-width: 100%">
              <template #header> 发布时间：{{ item.createTime }} </template>
              <video
                style="width: 100%; height: 400px"
                controls
                :src="item.url"
              />
            </el-card>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="健康状态" name="health">
        <el-card v-for="item in data.pet.petCloudHealthList" :key="item.id">
          <el-descriptions :title="'记录时间：'+item.createTime">
            <el-descriptions-item label="体温">{{item.centigrade}}℃</el-descriptions-item>
            <el-descriptions-item label="体重">{{item.weight}}kg</el-descriptions-item>
            <el-descriptions-item label="身高">{{item.height}}cm</el-descriptions-item>
            <el-descriptions-item label="心率">{{item.heartRate}}次/分</el-descriptions-item>
            <el-descriptions-item label="记录人">
              <el-tag size="small">{{item.createBy}}</el-tag>
            </el-descriptions-item>
          </el-descriptions>
        </el-card>
        
      </el-tab-pane>
    </el-tabs>

    <!-- 评价列表 -->
    <div class="card" style="padding: 20px">
      <div style="font-size: 24px; font-weight: bold; margin-bottom: 10px">
        评论 {{ data.totalComment }} 条
      </div>
      <div style="margin-bottom: 5px">
        <el-input
          type="textarea"
          :rows="3"
          v-model="data.form.content"
          placeholder="请输入评论内容"
        ></el-input>
      </div>
      <div style="text-align: right">
        <el-button size="large" type="primary" @click="addComment(null)"
          >发表评论</el-button
        >
      </div>

      <div style="margin: 20px 0">
        <div v-for="item in data.commentList" :key="item.id">
          <div style="display: flex; grid-gap: 20px; margin-bottom: 20px">
            <img
              :src="item.userAvatar"
              alt=""
              style="width: 50px; height: 50px; border-radius: 50%"
            />
            <div style="flex: 1">
              <div style="margin-bottom: 10px; color: #666">
                {{ item.userName }}
              </div>
              <div style="margin-bottom: 10px; font-size: 16px">
                {{ item.content }}
              </div>
              <div style="color: #666; margin-bottom: 10px">
                <span>时间：{{ item.time }}</span>
                <span
                  @click="reply(item)"
                  style="margin-left: 30px; cursor: pointer"
                  >回复</span
                >
                <span
                  v-if="item.userId === data.user.id"
                  style="margin-left: 10px; cursor: pointer"
                  @click="delComment(item.id)"
                  >删除</span
                >
              </div>
              <div v-if="item.showReply">
                <el-input
                  type="textarea"
                  :rows="2"
                  v-model="item.replyContent"
                  placeholder="请输入回复内容"
                ></el-input>
                <div style="margin-top: 5px; text-align: right">
                  <el-button type="primary" @click="addComment(item)"
                    >回复</el-button
                  >
                </div>
              </div>
            </div>
          </div>
          <!-- 回复开始 -->
          <div style="padding-left: 70px">
            <div v-for="sub in item.children" :key="sub.id">
              <div style="display: flex; grid-gap: 20px; margin-bottom: 20px">
                <img
                  :src="sub.userAvatar"
                  alt=""
                  style="width: 50px; height: 50px; border-radius: 50%"
                />
                <div style="flex: 1">
                  <div style="margin-bottom: 10px; color: #666">
                    {{ sub.userName }}
                    <span
                      v-if="sub.parentUserName !== item.userName"
                      style="color: #000"
                      >@{{ sub.parentUserName }}</span
                    >
                  </div>
                  <div style="margin-bottom: 10px; font-size: 16px">
                    {{ sub.content }}
                  </div>
                  <div style="color: #666; margin-bottom: 10px">
                    <span>时间：{{ sub.time }}</span>
                    <span
                      style="margin-left: 30px; cursor: pointer"
                      @click="reply(sub)"
                      >回复</span
                    >
                    <span
                      v-if="sub.userId === data.user.id"
                      style="margin-left: 10px; cursor: pointer"
                      @click="delComment(sub.id)"
                      >删除</span
                    >
                  </div>
                  <div v-if="sub.showReply">
                    <el-input
                      type="textarea"
                      :rows="2"
                      v-model="sub.replyContent"
                      placeholder="请输入回复内容"
                    ></el-input>
                    <div style="margin-top: 5px; text-align: right">
                      <el-button type="primary" @click="addComment(sub)"
                        >回复</el-button
                      >
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- 回复结束 -->
        </div>
      </div>
    </div>
    <el-dialog
      title="收货地址"
      v-model="data.formVisible"
      width="40%"
      destroy-on-close
    >
      <el-form
        ref="formRef"
        :model="data.form"
        label-width="90px"
        style="padding: 20px"
      >
        <el-form-item label="收货地址">
          <el-select style="width: 100%" v-model="data.form.addressId">
            <el-option
              v-for="item in data.addressList"
              :key="item.id"
              :value="item.id"
              :label="item.name + ' - ' + item.address + ' - ' + item.phone"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="data.formVisible = false">取 消</el-button>
          <el-button type="primary" @click="addOrder">确 定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
  
<script setup>
import { useRoute } from "vue-router";

const route = useRoute();
const petCloudId = route.query.id;
const activeTabs = ref("dynamic");

import { reactive, ref } from "vue";
import router from "@/router/index.js";
import request from "@/utils/request.js";
import { ElMessage } from "element-plus";

const videoList = [
  "http://localhost:9090/files/download/1746703654257-下载.mp4",
  "http://localhost:9090/files/download/1746703654257-下载.mp4",
  "http://localhost:9090/files/download/1746703654257-下载.mp4",
  "http://localhost:9090/files/download/1746703654257-下载.mp4",
  "http://localhost:9090/files/download/1746703654257-下载.mp4",
  "http://localhost:9090/files/download/1746703654257-下载.mp4",
  "http://localhost:9090/files/download/1746703654257-下载.mp4",
];
let count = 0;
const data = reactive({
  user: JSON.parse(localStorage.getItem("xm-user") || "{}"),
  id: router.currentRoute.value.query.id,
  pet: {},
  addressList: [],
  form: {},
  formVisible: false,
  // 评价
  commentList: [],
  form: {},
  totalComment: 0,
  prexComment: router.currentRoute.value.path.slice(
    router.currentRoute.value.path.lastIndexOf("/") + 1,
    router.currentRoute.value.path.length
  ),
});

const loadTree = () => {
  request
    .get("/comment/selectTree/" + data.prexComment + data.id)
    .then((res) => {
      data.commentList = res.data;
    });

  request
    .get("/comment/selectCount/" + data.prexComment + data.id)
    .then((res) => {
      data.totalComment = res.data ? res.data : 0;
    });
};
loadTree();
const addComment = (parentComment) => {
  if (parentComment) {
    // 回复
    data.form.content = parentComment.replyContent;
    data.form.pid = data.prexComment + data.id + parentComment.id;
    data.form.rootId = parentComment.rootId;

    parentComment.replyContent = "";
  }
  if (!data.form.content) {
    ElMessage.warning("请输入评论内容");
    return;
  }
  data.form.fid = data.prexComment + data.id;
  request.post("/comment/add", data.form).then((res) => {
    if (res.code === "200") {
      ElMessage.success("操作成功");
      data.form = {};
      loadTree();
    } else {
      ElMessage.error(res.msg);
    }
  });
};
const delComment = (id) => {
  ElMessageBox.confirm("您确定删除该评论及其子评论吗？", "删除确认", {
    type: "warning",
  })
    .then((res) => {
      request.delete("/comment/deepDelete/" + id).then((res) => {
        if (res.code === "200") {
          ElMessage.success("删除成功");
          loadTree();
        } else {
          ElMessage.error(res.msg);
        }
      });
    })
    .catch((err) => {
      console.error(err);
    });
};
const reply = (comment) => {
  comment.showReply = !comment.showReply;
  comment.replyContent = "";
};

window.scrollTo({ top: 0 });

const addCollect = (petId) => {
  request.post("/collect/add", { fid: petId }).then((res) => {
    if (res.code === "200") {
      ElMessage.success("操作成功");
      load();
    } else {
      ElMessage.error(res.msg);
    }
  });
};

const handleAdd = () => {
  data.form = { petId: data.id, shopId: data.pet.shopId };
  data.formVisible = true;
};

const addOrder = () => {
  if (!data.form.addressId) {
    ElMessage.warning("请选择收货地址");
    return;
  }
  request.post("/petOrders/add", data.form).then((res) => {
    if (res.code === "200") {
      ElMessage.success("下单成功");
      data.formVisible = false;
      load();
    } else {
      ElMessage.error(res.msg);
    }
  });
};

if (data.user.id) {
  request
    .get("/address/selectAll", {
      params: {
        userId: data.user.id,
      },
    })
    .then((res) => {
      data.addressList = res.data;
    });
}

const load = () => {
  request.get("/pet/cloud/selectById/" + data.id).then((res) => {
    data.pet = res.data;
  });
};
load();
</script>
  
<style scoped>
.myTooltip {
  width: 30%;
}
.waterfall-container {
  column-count: 3; /* 设置列数 */
  column-gap: 16px; /* 设置列间距 */
}

.waterfall-item {
  break-inside: avoid; /* 防止内容被拆分到多列 */
  margin-bottom: 16px; /* 设置行间距 */
}

@media (max-width: 1200px) {
  .waterfall-container {
    column-count: 2;
  }
}

@media (max-width: 768px) {
  .waterfall-container {
    column-count: 1;
  }
}
</style>
